<template>
	<view class="township-list-page page">
		<image class="top-bg" :src="cloudStorage+'index/top-bg.png'"></image>
		<CustomNav :isBack="false" :color="titleColor" :topBgColor="topBgColor" title="乡镇导览"></CustomNav>
		<view class="content-block">
			<view class="list-block">
				<view class="FZHZGBJ title">乡镇导览</view>
				<template v-if="list.length>0">
					<view @click="jumpProgram(item.appId)" class="township-item"  v-for="item in list" :key="item.id">
						<image class="avatar" :src="item.avatar"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</template>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {townshipList} from '@/api/index'
	export default{
		data(){
			return{
				titleColor:'#000',
				topBgColor:'rgba(0,0,0,0)',
				list:[
					
				],
			}
		},
		methods:{
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				townshipList().then(res=>{
					this.list=res;
				})
			},
			jumpProgram(appId){
				uni.navigateToMiniProgram({
					appId,
				})
			}
		},
		onShow() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.empty{
		width: 100%;
	}
	.township-list-page{
		width: 100%;
		position: relative;
		.top-bg{
			width: 100%;
			height: 480rpx;
		}
		.content-block{
			position: relative;
			margin-top: -70rpx;
			width: 100%;
			border-radius: 20px 20px 0 0;
			background: #F7F6F9;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			.title{
				width: 100%;
				margin-bottom: 30rpx;
			}
			.list-block{
				border-radius: 8px;
				background: #fff;
				width: 100%;
				padding: 30rpx;
				display: flex;
				flex-wrap: wrap;
				.township-item{
					width: 25%;
					margin-bottom: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.avatar{
						border-radius: 50%;
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>